// src/views/teacher/Evaluation.vue

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-icon><DataAnalysis /></el-icon>
        <span style="margin-left: 8px;">教学效果评价</span>
      </div>
    </template>

    <el-table :data="evaluationData" style="width: 100%" v-loading="loading">
      <el-table-column prop="courseName" label="课程名称" width="250" />
      <el-table-column prop="studentCount" label="评价人数" width="120" />
      <el-table-column prop="averageScore" label="平均得分" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.averageScore >= 90 ? 'success' : (scope.row.averageScore >= 80 ? 'primary' : 'warning')">
            {{ scope.row.averageScore.toFixed(2) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="feedback" label="主要反馈">
         <template #default="scope">
           <el-tooltip v-if="scope.row.feedback" :content="scope.row.feedback" placement="top">
             <span>{{ scope.row.feedback.substring(0, 50) + '...' }}</span>
           </el-tooltip>
         </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default>
          <el-button type="primary" link size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-if="!loading && evaluationData.length === 0" description="暂无教学评价数据" />
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import evaluationService from '../../services/evaluationService'; // --- (1) 导入服务 ---

const loading = ref(true); // 控制加载状态
const evaluationData = ref([]); // 存储从API获取的数据

// --- (2) 创建一个方法来获取数据 ---
const fetchEvaluations = async () => {
  try {
    loading.value = true; // 开始加载
    // 调用服务获取数据
    const data = await evaluationService.getEvaluations();
    evaluationData.value = data;
  } catch (error) {
    // 如果请求失败，显示错误消息
    ElMessage.error(error.message || '获取评价数据失败');
  } finally {
    loading.value = false; // 无论成功或失败，都停止加载
  }
};

// --- (3) 在组件挂载时调用获取数据的方法 ---
// 原有的模拟数据和 setTimeout 已被移除
onMounted(() => {
  fetchEvaluations();
});
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
}
</style>